<link rel="stylesheet" href="../../dest/css/card.min.css">

<h1>银行卡管理</h1>
<button  type="button" class="btn btn-success btn-sm" data-toggle="modal" data-target="#exampleModal">绑定银行卡</button>
<ul id="cardList" class="row">
    <li class="col-md-4">
        <p>
            银行卡名称：
            <span>工商银行</span>
        </p>
        <p>
            卡号：
            <span>1000000000000000000000</span>
        </p>
    </li>
    <li class="col-md-4">
        <p>
            银行卡名称：
            <span>工商银行</span>
        </p>
        <p>
            卡号：
            <span>1000000000000000000000</span>
        </p>
    </li>
    <li class="col-md-4">
        <p>
            银行卡名称：
            <span>工商银行</span>
        </p>
        <p>
            卡号：
            <span>1000000000000000000000</span>
        </p>
    </li>
</ul>

<div class="modal"  id="exampleModal" tabindex="-1" role="dialog">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
            <h5 class="modal-title" id="exampleModalLabel">绑定银行卡</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
            <form>
                <p>

                    <span>  银行名称:</span>
                    <select id="bankName">
                        <option value="1">中国银行</option>
                        <option value="2">工商银行</option>
                        <option value="3">农业银行</option>
                        <option value="4">招商银行</option>
                    </select>
                </p>
                <p>
                    <span>  开户行名称:</span>
                 
                   <input type="text" id="branchName">
               </p>
               <p>
                  <span> 银行卡号:</span>
                   <input type="text" id="cardNumber">
               </p>
            </form>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
          <button type="button" class="btn btn-primary">确定</button>
        </div>
      </div>
    </div>
  </div>

  <script src="../../js/card.js"></script>